<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10.组件事件(父子双向):v-model</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <countComponent-input v-model="num"></countComponent-input>
        <p>父组件num:{{num}}</p>
        
        <base-checkbox v-model="lovingVue"></base-checkbox>
        <div v-show="lovingVue">父组件：勾选显示</div>
    </div>

    <script>
        var countComponent = {
            props: ['value'],
            template: `
            <p>
            <input ref="input" :value="value" @input="$emit('input', $event.target.value)">
            </br>
            </p>
            `,
        }

        var baseCheckbox = {
            model: {
                prop: 'checked1', event: 'change1'
            },
            props: {
                checked1: Boolean
            },
            template: `
            <input
            type="checkbox"
            v-bind:checked="checked1"
            v-on:change="$emit('change1', $event.target.checked)"
            >
        `
        }
        var vm = new Vue({
            el: '#app',
            components: { 'countComponent-input': countComponent, 'base-checkbox': baseCheckbox },
            data: {
                num: 100,
                lovingVue: true
            },
        })
    </script>
</body>

</html>